function $(elemId) {
    return document.getElementById(elemId);
}


/**抬头*/

// 设置抬头背景
function windowScroll() {
    const navbar = $("navbar");
    if (navbar) {
        if (// 距页面顶部的距离
            document.body.scrollTop >= 50 ||
            document.documentElement.scrollTop >= 50
        ) {
            navbar.classList.add("nav-sticky");// 增加背景
        } else {
            navbar.classList.remove("nav-sticky");// 移除背景
        }
    }
}

// 绑定页面滚动
window.addEventListener("scroll", (e) => {
    e.preventDefault();// 如果此事件没有被显式处理，它默认的动作也不应该照常执行(?)。
    windowScroll();
});


/**轮播-大图（主展示图）*/

// 绑定左右按钮
// 左右按钮其实是反的（点左，向右移动）
$("gallery-button-left").addEventListener("click", moveRight);
$("gallery-button-right").addEventListener("click", moveLeft);

let mainImagePosition;
let mainImage;
let leftImage;
let rightImage;


// 向左移动：左消失，右出现（2-起点）
function moveLeft() {
    // 定位
    findImage();
    // 切换
    mainImage.style.animation = "move-left-mainImage 0.5s";
    rightImage.style.animation = "move-left-rightImage 0.5s";
    mainImage.style.transform = "translate(-100%)";
    rightImage.style.transform = "translate(0%)";
    setClassToLeft();
    // 更变缩略图
    setThumbnailActive();
}

// 向右移动：左出现，右消失（2-起点）
function moveRight() {
    // 定位
    findImage();
    // 切换
    mainImage.style.animation = "move-right-mainImage 0.5s";
    leftImage.style.animation = "move-right-leftImage 0.5s";
    mainImage.style.transform = "translate(100%)";
    leftImage.style.transform = "translate(0%)";
    setClassToRight();
    // 更变缩略图
    setThumbnailActive();
}

// 图片定位
function findImage() {
    let findResult = false;
    for (let i = 0; i <= 14; i++) {
        // 定位中央
        if ($("img-" + i) === document.getElementsByClassName("gallery-main-center")[0]) {
            mainImagePosition = i;
            mainImage = $("img-" + i);
            findResult = true;
            // 定位左右
            if (i <= 0) {// 中央位于 首位
                leftImage = $("img-14");
                rightImage = $("img-1");
            } else if (i >= 14) {// 中央位于 末位
                leftImage = $("img-13");
                rightImage = $("img-0");
            } else {// 中央位于 其他位
                leftImage = $("img-" + (i - 1));
                rightImage = $("img-" + (i + 1));
            }
        }
    }
    if (!findResult) alert("找不到图片正在展示！");
}

// 更改类（向左）
function setClassToLeft() {
    // 移除 左(-1)
    leftImage.classList.remove("gallery-main-left");
    // 中央(0) -> 左(-1)
    mainImage.classList.remove("gallery-main-center");
    mainImage.classList.add("gallery-main-left");
    // 右(+1) -> 中央(0)
    rightImage.classList.remove("gallery-main-right");
    rightImage.classList.add("gallery-main-center");
    // 增加 右的右(+2) -> 右(+1)
    if (mainImagePosition >= 14) {
        $("img-1").classList.add("gallery-main-right");
    } else if (mainImagePosition >= 13) {
        $("img-0").classList.add("gallery-main-right");
    } else {
        $("img-" + (mainImagePosition + 2)).classList.add("gallery-main-right");
    }
}

// 更改类（向右）
function setClassToRight() {
    // 移除 右(+1)
    rightImage.classList.remove("gallery-main-right");
    // 中央(0) -> 右(+1)
    mainImage.classList.remove("gallery-main-center");
    mainImage.classList.add("gallery-main-right");
    // 左(-1) -> 中央(0)
    leftImage.classList.remove("gallery-main-left");
    leftImage.classList.add("gallery-main-center");
    // 增加 左的左(-2) -> 左(-1)
    if (mainImagePosition <= 0) {
        $("img-13").classList.add("gallery-main-left");
    } else if (mainImagePosition <= 1) {
        $("img-14").classList.add("gallery-main-left");
    } else {
        $("img-" + (mainImagePosition - 2)).classList.add("gallery-main-left");
    }
}

// 点击缩略图时（1-终点）
function setImageMain() {
    let lastPosition;
    let currentPosition;

    // 1.定位

    findImage();
    lastPosition = mainImagePosition;// 定位主展示图的旧址
    findThumbnail();
    currentPosition = mainThumbnailPosition;// 定位主展示图的现址

    // 2.更改主展示图状态（换类名）

    // 清除
    for (let i = 0; i <= 14; i++) {
        $("img-" + i).classList.remove("gallery-main-center");
        $("img-" + i).classList.remove("gallery-main-left");
        $("img-" + i).classList.remove("gallery-main-right");
        $("img-" + i).style.transform = "translate(-200%)";//全部移到一边去，让出展示图位置
    }
    // 更改
    $("img-" + currentPosition).classList.add("gallery-main-center");
    if (currentPosition <= 0) $("img-14").classList.add("gallery-main-left");
    else $("img-" + (currentPosition - 1)).classList.add("gallery-main-left");
    if (currentPosition >= 14) $("img-0").classList.add("gallery-main-right");
    else $("img-" + (currentPosition + 1)).classList.add("gallery-main-right");
    mainImage = document.getElementsByClassName("gallery-main-center")[0];
    leftImage = document.getElementsByClassName("gallery-main-left")[0];
    rightImage = document.getElementsByClassName("gallery-main-right")[0];

    // 3.切换

    let distance = currentPosition - lastPosition;// 切换前后的位移
    let moveMainAnimation = $("move-main-to");
    let moveSubAnimation = $("move-sub-to");

    // 特殊情况的动画更改：只是第一张和最后一张的切换（我这个跟官网的不一样）可以删去
    if (distance === 14 || distance === -14) {
        if (distance === 14) {// 第一张到最后一张，向左移动改为向右
            distance = -1;
        } else {// 最后一张到第一张，向右移动改为向左
            distance = 1;
        }
    }

    // 判断移动方向
    if (distance > 0) {
        // 后在前的右侧，向左移动
        moveMainAnimation.innerHTML =
            "@keyframes move-main-to {from {transform: translate(100%);} to {transform: translate(0%);}}";
        moveSubAnimation.innerHTML =
            "@keyframes move-sub-to {from {transform: translate(0%);} to {transform: translate(-100%);}}";
    } else if (distance < 0) {
        // 后再前的左侧，向右移动
        moveMainAnimation.innerHTML =
            "@keyframes move-main-to {from {transform: translate(-100%);} to {transform: translate(0%);}}";
        moveSubAnimation.innerHTML =
            "@keyframes move-sub-to {from {transform: translate(0%);} to {transform: translate(100%);}}";
    }
    // 设置动画
    if (distance !== 0) {
        mainImage.style.animation = "move-main-to 0.5s";
        $("img-" + lastPosition).style.animation = "move-sub-to 0.5s";
    }

    // 4.结束

    // 固定位置
    mainImage.style.transform = "translate(0%)";
    leftImage.style.transform = "translate(-100%)";
    rightImage.style.transform = "translate(100%)";
    // 移除动画，使动画可以再次触发
    mainImage.addEventListener("animationend", function () {
        this.style.animation = "";
    });
    leftImage.addEventListener("animationend", function () {
        this.style.animation = "";
    });
    rightImage.addEventListener("animationend", function () {
        this.style.animation = "";
    });
}


/**轮播-小图（次缩略图）*/

// 绑定缩略图
let btList = document.getElementsByClassName("thumbnail");
for (let i = 0; i < btList.length; i++) btList[i].onclick = setActive;

let mainThumbnailPosition;
let mainThumbnail;


// 定位缩略图
function findThumbnail() {
    let findResult = false;
    for (let i = 0; i <= 14; i++) {
        if ($("bt-" + i) === document.getElementsByClassName("active")[0]) {
            mainThumbnailPosition = i;
            mainThumbnail = $("bt-" + i);
            findResult = true;
        }
    }
    if (!findResult) alert("找不到缩略图正在展示！");
}

// 移动缩略图
function moveThumbnail() {
    findThumbnail();
    let thumbnailList = document.getElementsByClassName("thumbnails-container")[0];
    thumbnailList.style.margin = "0 -" + (mainThumbnailPosition * 24.2) + "px";
}

// 点击缩略图时（1-起点）
function setActive() {
    // 更变缩略图状态
    for (let i = 0; i < btList.length; i++)
        btList[i].classList.remove("active");
    this.classList.add("active");
    // 移动缩略图位置
    moveThumbnail();
    // 切换主展示图
    setImageMain();
}

// 切换主展示图时（左右按钮）（2-终点）
function setThumbnailActive() {
    // 重新定位
    findImage();
    // 获取位置
    mainThumbnail = $("bt-" + mainImagePosition);
    // 更改状态
    for (let i = 0; i < btList.length; i++)
        btList[i].classList.remove("active");
    mainThumbnail.classList.add("active");
    // 移动
    moveThumbnail();
}

